<template>
  <div>
    <MyHeader style="background: skyblue" title="购物车"></MyHeader>
    <div class="main">
      <MyGoods
        v-for="(item, index) in list"
        :key="index"
        :item="item"
        @redd="red"
        @ad="add"
        :i="index"
      ></MyGoods>
    </div>
    <Footer :item="list"></Footer>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import Footer from "./components/MyFooter.vue";
import MyGoods from "./components/MyGoods.vue";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "App",
  components: {
    MyHeader,
    Footer,
    MyGoods,
  },
  computed: {
    ...mapState("cart", ["list"]),
  },
  methods: {
    ...mapActions("cart", ["getList"]),
    ...mapMutations("cart", ["setRed", "addD"]),
    red(i) {
      this.setRed({ index: i });
      // if (item.goods_count < 1) {
      //   item.goods_count = 0;
      // } else {
      //   item.goods_count--;
      // }
    },
    add(i) {
      this.addD({ index: i });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.main {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>
